<template>
    <div class="captcha" id="captcha" >
        <div class="text" id="text" v-if="waiting">
            行为验证™ 安全组件加载中
        </div>
    </div>
</template>

<script >
    import {captcha} from "@/api/login/index";

    export default {
        name: "GeetestCaptcha",
        props:{
            value:{
                type:Object,
            }
        },
        data(){
            return {
                waiting:false,
                captchaObj:null
            }
        },
        mounted(){
            this.setupGeetest();
        },

        methods:{

            resetGeetest(){
                if (this.captchaObj){
                    this.captchaObj.reset();
                    this.$emit('input',null)
                    this.$emit('change',null)
                }
            },

            setupGeetest() {
                let self = this
                captcha().then(data => {
                    console.log(data)
                    window.initGeetest({
                        // 以下配置参数来自服务端 SDK
                        gt: data.gt,
                        challenge: data.challenge,
                        offline: !data.success,
                        new_captcha: true,
                        product: "popup", // 产品形式，包括：float，popup
                        width: "288px"

                    }, (captchaObj) => {
                        console.log(captchaObj)
                        // 这里可以调用验证实例 captchaObj 的实例方法
                        captchaObj.appendTo('#validate');
                        self.captchaObj = captchaObj
                        captchaObj.onReady(() => {
                            self.waiting = false
                        });
                        captchaObj.onSuccess(() => {
                            self.$emit('input',captchaObj.getValidate())
                            self.$emit('change',captchaObj.getValidate())
                        })

                    })
                }).catch(error => {

                })
            },
        }
    }
</script>

<style scoped lang="less">
    .captcha {
        display: block;
        .text {
            height: 42px;
            text-align: center;
            border-radius: 2px;
            background-color: #F3F3F3;
            color: #BBBBBB;
            font-size: 14px;
            letter-spacing: 0.1px;
            line-height: 42px;
        }
    }

    .geetest_radar_btn {
        border-color: #e0e0e0;
    }
</style>
